<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/asd.css" rel="stylesheet" />
		<link href="../css/asdd.css" rel="stylesheet" />
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}

			h5 {
				margin-top: 30px;
				font-weight: bold;
			}

			h5:first-child {
				margin-top: 15px;
			}

			body,
			html {
				box-sizing: border-box;
			}

			.keyboard {
				background: #f4f4f4;
				padding: 5px;
			}

			.grid_2 {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.grid_2>div,
			.grid_2>span,
			.grid_2>li,
			.grid_2>a {
				width: 50%;
			}

			.grid_3 {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.grid_3>div,
			.grid_3>span,
			.grid_3>li {
				width: 33.3333%;
			}

			.center {
				text-align: center;
			}

			.fontb {
				font-weight: bold;
			}

			.key_button {
				background: white;
				margin: 5px;
				padding: 10px 5px;
				box-sizing: border-box;
				font-size: 25px;
				border-radius: 10px;
				box-shadow: 0 2px 2px #ccc;
			}

			.key_button:active {
				box-shadow: none;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<div>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">确认购买</h1>
			</header>


			<div style="margin-top: 45px;height: 120px;background-color: #d1d1d1;">
				<div style="float: left;">
					<div style="margin-top: 25px;margin-left: 25px;float: left;">剩余可购： </div>
					<div style="margin-top: 25px;">5000元</div>

					<div style="margin-top: 20px;margin-left: 25px;float: left;">账户余额： 1000元</div>

				</div>
				<div style="float: right;border: solid 1px #000000;margin-top: 60px;margin-right: 25px;"><button
						type="button" class="mui-btn mui-btn-outlined" style="border-radius: 5px;width: 80px;">
						充值
					</button></div>

			</div>


			<div style="background-color: #ffffff;min-height: 220px;">
				<div style=" margin-top: 10px;min-height: 45px;width: 90%;margin: 0 auto;">
					<div style="margin-right: 18px; width: 64%;height: 42px;float: left;margin-top: 6px;">
						<label style="font-size: 15px;">投资金额</label>
						<input type="text" class="mui-input-clear" style="width: 50%;height: 35px;border: none;"><a
							style="font-size: 15px;float: right;margin-top: 10px;">元</a>
					</div>
					<div
						style="float: left;border-left: solid 1px #000000;;height: 32px;width: 30%;margin: 0 auto;margin-top: 5.5px;">

						<button type="button" class="mui-btn mui-btn-outlined"
							style="border-radius: 5px;width: 80px;height: 30px; float: right; ">
							全部购买
						</button>

					</div>
				</div>

				<div
					style=" margin-top: 10px;min-height: 45px;width: 90%;margin: 0 auto; margin-top: 5px;font-size: 15px;">

					<ul class="mui-table-view">
						<li class="mui-table-view-cell" style="margin-left: -15px;">
							<a class="mui-navigate-right">
								使用优惠券
							</a>
						</li>
						<li class="mui-table-view-cell" style="margin-left: -15px;">
							<a class="mui-navigate-right">
								预计收益
							</a>
						</li>

					</ul>
				</div>

				<div style="margin: 0 auto;margin-top: 10px;width: 75%;">
					<button type="button" class="mui-btn mui-btn-outlined"
						style="border-radius: 5px;width: 100%;height: 50px;">
						<a style="font-size: 15px;">立刻购买</a>
					</button>
					<a style="float: left;margin-top: 5px;"><span class="mui-icon mui-icon-checkmarkempty"></span></a>
					<h5 style="margin-top: 10px;float: left;">本人已阅读并同意《网络基金购买协议》</h5>
				</div>
				<br />
				<br />
				<div class="keyboard center fontb">
					<div class="grid_3">
						<div>
							<div class="key_button">1</div>
						</div>
						<div>
							<div class="key_button">2</div>
						</div>
						<div>
							<div class="key_button">3</div>
						</div>
						<div>
							<div class="key_button">4</div>
						</div>
						<div>
							<div class="key_button">5</div>
						</div>
						<div>
							<div class="key_button">6</div>
						</div>
						<div>
							<div class="key_button">7</div>
						</div>
						<div>
							<div class="key_button">8</div>
						</div>
						<div>
							<div class="key_button">9</div>
						</div>
					</div>
					<div style="display:flex;">
						<div style="flex:2;">
							<div class="key_button">0</div>
						</div>
						<div style="flex:1;">
							<div class="key_button">删除</div>
						</div>
					</div>
				</div>

			</div>



	</body>
	<script type="text/javascript">
		mui.plusReady(function() { // 取到当前的webview
			//var slef = plus.webview.currentWebview();

			// 通过webview的id，获取指定的webview
			var slef = plus.webview.getWebviewById("goumai.html");

			document.getElementById("num").innerText = slef.newsId + 1;
		})
	</script>
</html>
